<template>
    <div class="inspectAttendance-box">
        <div style="padding: 8px 15px 0 15px;position: fixed;width: calc(100% - 239px);background: #fff;z-index: 999;">
            <!-- <a-breadcrumb>
                <a-breadcrumb-item>药品生产查询统计</a-breadcrumb-item>
                <a-breadcrumb-item>审评出勤率</a-breadcrumb-item>
            </a-breadcrumb> -->
            <div style="display: flex;align-items: center;padding: 8px 0;overflow-y: auto;flex-wrap: wrap;">
                <span>年份：</span>
                <a-select
                    style="margin-right: 10px;width: 247px; "
                    mode="multiple"
                    placeholder="请选择年份"
                    v-model:value="conditionData.years"
                    >
                    <a-select-option v-for="(item,index) in yearsData" :key="item.itemValue">
                        {{item.itemText}}
                    </a-select-option>
                </a-select>
                <!-- <span>审评类型：</span>
                <a-select
                    style="margin-right: 10px;width: 200px;"
                    mode="multiple"
                    placeholder="请选择审评类型"
                    v-model:value="conditionData.jclxs"
                >
                    <a-select-option v-for="(item,index) in examTypeData" :key="item.itemValue">
                        {{item.itemText}}
                    </a-select-option>
                </a-select>
                <span>单位名称：</span>
                <a-input v-model="conditionData.fgzdw" placeholder="请选择单位名称" style="margin-right: 10px;width: 150px;"></a-input>
                <span>是否属地：</span>
                <a-checkbox style="margin-right: 10px" v-model:value="conditionData.isSd"></a-checkbox>
                <span>是否异地：</span>
                <a-checkbox style="margin-right: 10px" v-model:value="conditionData.isYd"></a-checkbox> -->
                <a-button style="margin-right: 10px" class="blue-btn" type="primary" @click="searchForClick">搜索</a-button>
                <a-button @click="resettingClick">重置</a-button>
            </div>
        </div>
        <div style="padding: 15px 15px 0 15px;padding-top: 66px;" :key="dataKey">
            <a-collapse v-model:activeKey="activeKey" class="tabs-collapse-box">
                <a-collapse-panel key="1" header="审评（家）年度出勤率信息" class="collapse-panel-head-l">
                    <!-- <template #extra>
                        <span v-if="activeKey.indexOf('1') !== -1" @click="activeKey = activeKey.filter(item => item !== '1')">折叠</span>
                        <span v-else @click="activeKey.push('1')">展开</span>
                    </template>-->
                    <div >
                        <table class="table-v" border="1" style="border-color:#dedcdc;width: 100%;">
                            <tr style="background-color: #dee5ed;">
                                <th v-for="(item,index) in yearTjList[0]" :key="index">{{ item }}</th>
                            </tr>
                            <tr>
                                <td v-for="(item,index) in yearTjList[1]" :key="index">{{item}}</td>
                            </tr>
                        </table>
                    </div>
                </a-collapse-panel>
                <a-collapse-panel key="2" header="审评员年度出勤率信息" class="collapse-panel-head-l">
                    <!-- <template #extra>
                        <span v-if="activeKey.indexOf('2') !== -1" @click="activeKey = activeKey.filter(item => item !== '2')">折叠</span>
                        <span v-else @click="activeKey.push('2')">展开</span>
                    </template>-->
                    <!-- style="height: calc(100vh - 395px);overflow-y: auto;" -->
                    <a-button type="primary" class="blue-btn" style="margin-bottom: 10px;" @click="exportClick"> 导出 </a-button>
                    <div >
                        <table class="table-v" border="1" style="border-color:#dedcdc;width: 100%;">
                            <tr style="background-color: #dee5ed !important;">
                                <th v-for="(item,index) in cqlTjList[0]" :key="index">{{ item }}</th>
                            </tr>
                            <tr v-for="(item,index) in cqlTjList" :key="index" v-if="index > 0"  :style="{backgroundColor: index % 2 !== 0?'':'#dee5ed'}">
                                <td v-for="(node , nIndex) in item" :key="nIndex">{{node}}</td>
                            </tr>
                        </table>
                    </div>
                </a-collapse-panel>
            </a-collapse>
        </div>
    </div>
</template>
<script>
import { listServe, ocalityPostAction, exportHcyCqlInTjData } from "./service/index";
import compSelector from '@/components/compSelector/compSelector'
export default {
    components:{
        compSelector
    },
    props:{

    },
    data(){
        return{
            activeKey:['1','2'],
            yearTjList:[],
            cqlTjList:[],
            conditionData:{isSd:true,isYd:true},
            examTypeData:[],
            dataKey:null,
            yearsData:[],
        }
    },
    watch:{

    },
    mounted(){
        this.getData(this.conditionData)
        //获取审评类型
        ocalityPostAction({dictName:'药品生产检查类型'}).then(res=>{
            if(res.code == 200){
                this.examTypeData = res.result
            }else{
                this.$message.warning(res.message)
            }
        })
        ocalityPostAction({dictName:'年度列表'}).then(res=>{
            if(res.code == 200){
                this.yearsData = res.result
            }else{
                this.$message.warning(res.message)
            }
        })
    },
    methods:{
        getData(val){
            let data = {fywflcode:'001002'}
            if(val){
                data = {
                    ...data,
                    ...val,
                    jclxs:val.jclxs?val.jclxs.join(','):'',
                    years:val.years?val.years.join(','):'',
                }
            }
            listServe(data).then(res=>{
                if(res.code == 200){
                    this.yearTjList = res.result.yearTjList
                    this.cqlTjList = res.result.cqlTjList
                    this.dataKey = Date.now()
                }else{
                    this.$message.warning(res.message)
                    
                }
            })
        },
        searchForClick(){
            this.getData(this.conditionData)
            
        },
        resettingClick(){
            this.conditionData = {isSd:true,isYd:true}
            this.getData(this.conditionData)
        },
        exportClick(){//导出
            var fileName = '审评员年度出勤率表'
            let data = {
                fywflcode:'001002',
                ...this.conditionData,
                jclxs:this.conditionData.jclxs?this.conditionData.jclxs.join(','):'',
                years:this.conditionData.years?this.conditionData.years.join(','):'',}

            exportHcyCqlInTjData(data).then(res=>{
                if (!res) {
                    this.$message.warning('文件导出失败')
                    return
                }else{
                    if (typeof window.navigator.msSaveBlob !== 'undefined') {
                        window.navigator.msSaveBlob(new Blob([res], { type: 'application/vnd.ms-excel' }), fileName + '.xls')
                    } else {
                        let url = window.URL.createObjectURL(new Blob([res], { type: 'application/vnd.ms-excel' }))
                        let link = document.createElement('a')
                        link.style.display = 'none'
                        link.href = url
                        link.setAttribute('download', fileName + '.xls')
                        document.body.appendChild(link)
                        link.click()
                        document.body.removeChild(link) //下载完成移除元素
                        window.URL.revokeObjectURL(url) //释放掉blob对象
                    }
                }
            })
        }
    }
}
</script>
<style lang="less">
.inspectAttendance-box{
    background-color: #fff;
    min-height: calc(100vh - 120px);
    padding-bottom: 20px;
    // .ant-collapse{
    //     background-color: #5ca3e5 !important;
    //     // border:1px solid #5ca3e5 !important;
    //     border-bottom: 0 !important;
        
    // }
    // .ant-collapse-header{
    //     color: #fff !important;
    // }
    .blue-btn{
        border: 1px solid #5ca3e5 !important;
        background-color: #5ca3e5 !important;
        color: #fff !important;
    }
}
</style>